<template>
  <div class="editor">
    <editor api-key="28sfi3rxgs5ipx08jmx8n0olj2y33hzq1vuctikl7ckwq8fo" :init="editInti"></editor>
  </div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
export default {
  name: 'Editor',
  components: {
    'editor': Editor
  },
  data () {
    return {
      editInti: {
        language_url: '/static/tinymce/zh_CN.js',
        language: 'zh_CN',
        plugins: [
          "advlist autolink lists link image imagetools charmap print preview anchor textcolor wordcount fullscreen",
          "searchreplace visualblocks code fullscreen",
          "insertdatetime media table contextmenu paste"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | searchreplace fullscreen",
        height: '600',
        image_title: false,
        automatic_uploads: true,
        images_upload_handler: (blobInfo, success, failure) => {
          var xhr, formData
  
          xhr = new XMLHttpRequest()
          xhr.withCredentials = false
          xhr.open('POST', 'http://localhost/upload.php')
  
          xhr.onload = function () {
              var json
                if (xhr.status !== 200) {
                    failure('HTTP Error: ' + xhr.status)
                    return
                }
                json = JSON.parse(xhr.responseText)    
                if (!json || typeof json.location !== 'string') {
                failure('Invalid JSON: ' + xhr.responseText)
                    return
                }
                success(json.location)
            }
    
            formData = new FormData()
            formData.append('file', blobInfo.blob(), blobInfo.filename())
            xhr.send(formData)
        }
      }
    }
  }
}
</script>
<style lang="stylus" scoped>

</style>


